import { Trans, withI18n } from '@lingui/react'
import React, { PureComponent } from 'react'
import styles from '../index.less'
import { DatePicker, Select, Typography, Button, Icon } from 'antd'
import { Page } from 'components'
import moment from 'moment'
import ReGeoModal from './ReGeoModal'
import { connect } from 'dva'

const { Paragraph } = Typography
const Option = Select.Option

@withI18n()
@connect(({ userDetail, loading }) => {
  const { data, deviceid, EditingGeo, AllChildGeo } = userDetail
  const getAllDeviceGeoLoading = loading.effects[`userDetail/getAllDeviceGeo`]
  return {
    data,
    deviceid,
    EditingGeo,
    AllChildGeo,
    getAllDeviceGeoLoading, //, loading
  }
})
class Details extends PureComponent {
  state = {
    modalTargetGeo: undefined,
  }
  render() {
    const { modalTargetGeo } = this.state
    const {
      i18n,
      dispatch,
      onedit,
      data,
      deviceid,
      EditingGeo,
      AllChildGeo,
      getAllDeviceGeoLoading,
    } = this.props
    const {
      BelongProject,
      Charge,
      DeviceName,
      FirmwareVersion,
      LastServingTime,
      Location,
      RegisterTime,
      ReportTotalTime,
    } = data
    const showReGeo = () => {
      dispatch({
        type: 'userDetail/updateState',
        payload: { EditingGeo: true },
      })
    }
    const onGetAllGeo = () => {
      return dispatch({
        type: 'userDetail/getAllDeviceGeo',
        payload: { ProjectId: BelongProject.belongobjid },
      })
    }
    const modelrow = (name, obj, onchange) =>
      obj && (
        <div key={name} className={styles.item}>
          <div>
            <b>{name}</b>
          </div>
          <Paragraph
            className={styles.item}
            {...obj.copyable && { copyable: { text: obj.value } }}
            {...obj.editable && { editable: { onChange: onchange } }}
          >
            {obj.value}
          </Paragraph>
        </div>
      )
    console.log('modalTargetGeo:' + modalTargetGeo)
    return (
      <Page inner>
        <div>
          {modelrow(i18n.t`Register Time`, RegisterTime, str => {
            onedit('changeRegisterTime', {})
          })}
          {modelrow(i18n.t`Keeping Principal`, Charge, str => {
            if (str != Charge.value)
              onedit('changeCharge', { deviceid: deviceid, Charge: str })
          })}
          {Location && (
            <div className={styles.item}>
              <div>
                <b>
                  <Trans>Device Location</Trans>
                </b>
              </div>
              <Button
                size={'small'}
                disabled={getAllDeviceGeoLoading}
                onClick={e => {
                  onGetAllGeo().then(() => {
                    this.setState(
                      {
                        modalTargetGeo: Location.value,
                      },
                      () => {
                        showReGeo()
                      }
                    )
                  })
                }}
              >
                {
                  <Icon
                    type={getAllDeviceGeoLoading ? 'loading' : 'environment'}
                  />
                }
                {Location.value}
              </Button>
            </div>
          )
          // str => {
          //   onedit('changeLocation', { deviceid: deviceid, Geo: str })
          // }
          }
          {/* {modelrow(i18n.t`Device Location`, Location, str => {
            onedit('changeLocation', { deviceid: deviceid, Geo: str })
          })} */}
          {modelrow(i18n.t`Count of Reporting`, ReportTotalTime, str => {})}
          {LastServingTime && (
            <div key={i18n.t`Last Serving Time`} className={styles.item}>
              <div>
                <b>{i18n.t`Last Serving Time`}</b>
              </div>
              {LastServingTime.editable ? (
                <DatePicker
                  {...(LastServingTime.value != '未进行维护' &&
                  LastServingTime.value
                    ? {
                        value: moment(LastServingTime.value, 'YYYY-MM-DD'),
                      }
                    : {})}
                  placeholder={i18n.t`Select Time`}
                  format={'YYYY-MM-DD'}
                  size={'small'}
                  onChange={str => {
                    if (str != LastServingTime.value && str != 'Invalid date')
                      onedit('changeLastServingTime', {
                        deviceid: deviceid,
                        LastServingTime: moment(str, 'YYYY-MM-DD').format(
                          'YYYY-MM-DD'
                        ),
                      })
                  }}
                />
              ) : (
                <div>{LastServingTime.value}</div>
              )}
            </div>
          )}
          {FirmwareVersion && (
            <div key={i18n.t`Firmware Version`} className={styles.item}>
              <div>
                <b>{i18n.t`Firmware Version`}</b>
              </div>
              {FirmwareVersion.editable ? (
                <Select
                  defaultValue={FirmwareVersion.value}
                  style={{ width: '120px' }}
                  size={'small'}
                  onChange={str => {
                    onedit('changeFirmwareVersion', {
                      deviceid: deviceid,
                      FirmwareVersion: str,
                    })
                  }}
                >
                  {FirmwareVersion.backarray.map(item => (
                    <Option value={item}>{item}</Option>
                  ))}
                </Select>
              ) : (
                <div>{FirmwareVersion.value}</div>
              )}
            </div>
          )}
          {BelongProject && (
            <div
              key={i18n.t`Device Subordinate Project`}
              className={styles.item}
            >
              <div>
                <b>{i18n.t`Device Subordinate Project`}</b>
              </div>
              {BelongProject.editable ? (
                <Select
                  defaultValue={BelongProject.belongobjid}
                  style={{ width: '120px' }}
                  size={'small'}
                  onChange={str => {
                    if (str != DeviceName.belongobjid)
                      onedit('changeProject', {
                        deviceids: [deviceid],
                        targetprojectid: str,
                      })
                  }}
                >
                  {BelongProject.backarray.map(item => (
                    <Option value={item.objectId}>{item.ProjectName}</Option>
                  ))}
                </Select>
              ) : (
                <div>{BelongProject.value}</div>
              )}
            </div>
          )}
        </div>
        {EditingGeo && modalTargetGeo && modalTargetGeo.indexOf(',') != -1 && (
          <ReGeoModal
            {...{
              AllChildGeo,
              location,
              nowgeo: {
                lng: parseFloat(modalTargetGeo.split(',')[1]),
                lat: parseFloat(modalTargetGeo.split(',')[0]),
              },
              onOk: geo => {
                onedit('changeLocation', {
                  deviceid: deviceid,
                  Geo: `${geo.lat},${geo.lng}`,
                })
              },
            }}
          />
        )}
      </Page>
    )
  }
}

Details.propTypes = {}

export default Details
